<script setup lang="ts">
import { computed, inject, useAttrs } from "vue";

defineOptions({ name:"WebxFormItem" });
const readonly = inject("readonly");
// 所有传过来的属性
const attrs = useAttrs();
// 校验规则
const rules = computed(() => readonly ? [] : attrs.rules)
</script>

<template>
  <div>
    <AFormItem v-bind="$attrs" :rules="rules">
      <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
        <!-- 表单插槽 -->
        <template v-if="!readonly">
          <slot :name="slotName" v-bind="slotData" />
        </template>
        <!-- 只读插槽 -->
        <template v-else>
          <slot name="readonly" />
        </template>
      </template>
    </AFormItem>
  </div>
</template>

<style lang="less" scoped></style>